<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>金融供需模型</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!--轮播-->

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
    /*轮播*/
    /* Make the image fully responsive */
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }

    .box{
        width: 80%;height: 25%;
        background-color: #2a80eb;
        margin: 10px auto;
    }
    .session_box{
        width: 80%;height: 35%;
        background-color: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .session{
        width: calc(25% - 2px);
        height: calc(60% - 5px);
        background-color: lightslategrey;
        margin-left: 2px;
        margin-top: 5px;
        /*background-image: url("/img/lo.gif");*/
    }
    .session_img{
        width: calc(100%);height:calc(100%)
    }
    .session_p{
        height: calc(10%);
        font-size: 10px;
        margin-top: 0px;
        color: gray;
        text-align: center;
    }
    .p_button{
        margin-left: 10px;
    }

</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbar"></div>

<header class="box">
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="/news"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"></a>
            </div>
            <div class="carousel-item">
                <a href="/news"><img src="https://static.runoob.com/images/mix/img_nature_wide.jpg"></a>
            </div>
            <div class="carousel-item">
                <a href="/news"><img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"></a>
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>
</header>

<p style="margin-left: 10%;text-align: left;color: grey">
    <a  class="p_button" >教学模型</a>
    <a  href="/moreModel" >   >>more</a>
</p>

<section class="session_box" style="justify-content: left">
    <div class="session" th:each="info,infoStat : ${page.list}"  >
        <a th:href="@{/modelInfo(id=${info.id})}">
            <img class="session_img" th:src="${info.imgUrl==null?'/img/lo.png':info.imgUrl}"  onerror="this.src='/img/default.jfif'" >
        </a>
        <p class="session_p" style="font-size: 15px;color: black;text-align: center" th:text="${info.name}"></p>
        <p class="session_p"  th:text="${info.rule}"></p>
    </div>
</section>

<p style="margin-left: 10%;text-align: left;color: grey">
    <a class="p_button" style="color: #f59b00">热门课程</a>
    <a  href="/moreLesson" >   >>more</a>
</p>
<section class="session_box" style="justify-content: left">
    <div class="session" th:each="info,infoStat : ${lessonPage.list}">
        <a th:href="@{/lessonInfo(id=${info.id})}">
            <img class="session_img" th:src="${info.imgUrl==null?'/img/lo.png':info.imgUrl}"   onerror="this.src='/img/default.jfif'" >
        </a>
        <p class="session_p" style="font-size: 15px;color: black" th:text="${info.name}"></p>
    </div>


</section>




</body>
</html>